<!--下拉框分页-->
<template>
  <div class="container-select">
    <!-- 这部分是label -->
    <span class="title-label" :style="{ width: labelWidth }">{{ label }}</span>
    <!-- 这部分是点击输入框跳出来的分页小弹窗 -->
    <el-popover placement="bottom" trigger="click" v-model="visible">
<!--      :show-header="false" 隐藏表头-->
      <el-table

        size="mini"
        :data="list"
        highlight-current-row
        @row-click="changeTableRow"
        v-loading="listLoading"
      >
        <el-table-column
          :prop="nameProp"
          :label="nameLabel"
          align="center"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="title"
          :label="otherLabel"
          align="center"
        ></el-table-column>
        <!--<el-table-column
          v-if="other"
          :prop="otherProp"
          :label="otherLabel"
          align="center"
        ></el-table-column>-->
      </el-table>
      <!--//每页展示的条数 （page-size）  当前页码（current-page）-->
      <div>params.pageNum{{params.pageNum}}</div>
      <el-pagination
        small
        @current-change="getList"
        :current-page="params.pageNum"
        :page-size="params.pageSize"
        layout="prev, pager,next,total"
        :total="total"
      >
      </el-pagination>
      <!--<small-pagination
        :total="total"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getList"
      />-->
      <el-input
        v-model="inputValue"
        :placeholder="placeholder"
        clearable
        slot="reference"
        @input="onChange"
      ></el-input>
    </el-popover>
  </div>
</template>

<script>
  // 这是分页组件。。用el-pagination也可以
  // import smallPagination from "@/components/Pagination/withoutNumber.vue";

  export default {
    components: {
      // smallPagination,
    },
    props: {
      labelWidth: {
        type: String,
        default: "70px",
      },
      label: {
        type: String,
        default: "机构名称：",
      },
      // 控制popover显隐的属性
      visible: {
        type: Boolean,
        default: false,
      },
      // 列表数据
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 列表loading
      listLoading: {
        type: Boolean,
        default: false,
      },
      // 列表属性1
      nameProp: {
        type: String,
        default: "",
      },
      // 列表label 1
      nameLabel: {
        type: String,
        default: "机构名称",
      },
      // 另一个属性。有就为true，妹有就false
      // 这页只显示一列机构名儿，别的页面有时会要求显示电话啊啥的
      other: {
        type: Boolean,
        default: false,
      },
      otherProp: {
        type: String,
        default: "",
      },
      otherLabel: {
        type: String,
        default: "机构联系电话",
      },
      // 分页所需参数
      params: {
        type: Object,
        default: () => {},
      },
      // 输入框内容
      inputValue: {
        type: String,
        default: "",
      },
      placeholder: {
        type: String,
        default: "请选择机构",
      },
      total: {
        type: Number,
        default: 0,
      },
    },
    methods: {
      // 点击行
      changeTableRow(row) {
        this.inputValue = row[this.nameProp];  // input中显示列表中选择的数据
        this.code = row[this.otherProp];  // 保存选中行的code
        this.visible = false;  // 选中行则popover消失
      },
      // 获取数据
      getList(val) {
        console.log("this.params",this.params,'val',val)
        this.$emit("getList", this.params);
      },
      // 改变input值
      onChange(value) {
        if (value == "") {
          this.code = "";
        }
        this.$emit("onChangeOrganizeValue", value);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-input {
    width: 140px;
  }
  .title-label {
    display: inline-block;
    text-align: right;
    color: #606266;
    font-size: 14px;
    font-weight: bold;
  }
  .popover {
    background: red;
  }
</style>
<!--<template>
    <div></div>
</template>

<script>
    export default {
        name: "select-pagination"
    }
</script>

<style scoped>

</style>-->
